<template>
  <view class="container">

    <view class="common_cell">
      <u-cell title="入驻身份" :border="false">
        <view slot="value" class="u-cell-left">

          <u-radio-group v-model="form.joinType">
            <u-radio shape="circle" name="1" label="个人  "></u-radio>
            <u-radio shape="circle" name="2" label="企业"></u-radio>
          </u-radio-group>

        </view>
      </u-cell>
    </view>


    <view class="common_cell">
      <u-cell title="名字" :border="false">
        <view slot="value" class="u-cell-left">
          <u--input inputAlign="right" placeholder="请输入您的名字" border="none" v-model="form.name"></u--input>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell title="身份证号" :border="false">
        <view slot="value" class="u-cell-left">
          <u--input inputAlign="right" placeholder="请输入您的身份证号" border="none" v-model="form.idCardNo"></u--input>
        </view>
      </u-cell>
    </view>



    <view class="common_cell">
      <u-cell title="手机号" :border="false">
        <view slot="value" class="u-cell-left">
          <u--input v-model="form.phone" inputAlign="right" placeholder="请输入您的手机号" border="none" />
        </view>
      </u-cell>
    </view>

    <!-- <view class="common_cell">
      <u-cell title="邮箱" :border="false">
        <view slot="value" class="u-cell-left">
          <u--input inputAlign="right" placeholder="请输入您的邮箱" v-model="form.email" border="none"></u--input>
        </view>
      </u-cell>
    </view> -->
    <!-- <view class="common_cell">
      <u-cell title="备注" :border="false">
        <view slot="value" class="u-cell-left">
          <u--input inputAlign="right" v-model="form.remark" placeholder="请输入备注" border="none"></u--input>
        </view>
      </u-cell>
    </view> -->

    <view class="common_cell">
      <u-cell title="身份证正面" :border="false">
        <view slot="value" class="u-cell-left">
          <u-upload :fileList="fileList1" @afterRead="afterRead" name="1" multiple :maxCount="1"></u-upload>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell title="身份证反面" :border="false">
        <view slot="value" class="u-cell-left">
          <u-upload :fileList="fileList2" @afterRead="afterRead" name="2" multiple :maxCount="1"></u-upload>
        </view>
      </u-cell>
    </view>

    <view class="common_cell">
      <u-cell title="营业执照" :border="false">
        <view slot="value" class="u-cell-left">
          <u-upload :fileList="fileList3" @afterRead="afterRead" name="3" multiple :maxCount="1"></u-upload>
        </view>
      </u-cell>
    </view>



    <view class="confirm_recharge">
      <view class="confirm_recharge_text" @click="apply">提交</view>
    </view>
  </view>
</template>

<script>
import { addAgent } from "@/api/index";
export default {
  components: {},
  data() {
    return {
      // 页面参数
      options: {},
      form: {
        // 名字
        name: "",
        // 手机号
        phone: "",
        // 邮箱
        email: "",
        // 备注
        remark: "",
        // 身份证正面图片
        idCardFrontImg: "",
        // 身份证反面图片
        idCardBackImg: "",
        // 营业执照图片
        businessLicenseImg: "",
        // 加盟类型
        joinType: "",
        idCardNo: ""

      },
      fileList1: [],
      fileList2: [],
      fileList3: [],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() { },

  methods: {

    // 删除图片 
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {

      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);

        if (event.name == 1) {
          // 正面
          this.form.idCardFrontImg = result;
        } else if (event.name == 2) {
          // 身份证反面
          this.form.idCardBackImg = result;
        } else if (event.name == 3) {
          // 营业执照
          this.form.businessLicenseImg = result;
        }

        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      console.log('urlurlurl', url);

      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          // url: "https://haiqilink.com/api/app/base/comm/upload", // 仅为示例，非真实的接口地址
          url: `http://127.0.0.1:8001/app/base/comm/upload`,
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            console.log('resresres', JSON.parse(res.data));

            setTimeout(() => {
              resolve(JSON.parse(res.data).data);
            }, 1000);
          },
        });
      });
    },

    // 申请代理
    async apply() {
      try {
        await addAgent(this.form)
        uni.showToast({
          title: "提交成功，请请耐心等待审核",
          icon: "success",
          duration: 2000
        });
      } catch (error) {

      }
    },

  },
};
</script>

<style lang="scss" scoped>
.container {
  background: rgba(255, 255, 255, 1);
}

.confirm_recharge {
  height: 83.523rpx;
  border-radius: 42.614rpx;
  background: #60a4f7;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 85.227rpx;
  width: 80%;
  left: 10%;

  .confirm_recharge_text {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 34.006rpx;
    text-align: left;
    color: #ffffff;
  }
}
</style>